<template>
    <article class="components-rightList-box">
        <!-- 广告新闻资讯轮播 -->
        <div class="swiper-container" id="AdvertisingNews-swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in AdvertisingNewsItem" :key="index">
                    <a :href="item.url" target="_blank" :title="item.description" :alt="item.description">
                        <img v-lazy="item.photo" :title="item.description" :alt="item.description">
                        <p class="webkit-text-overflow-1lines">{{ isNull0(item.description) }}</p>
                    </a>
                </div>
            </div>
            <ul class="swiper-pagination"></ul>
        </div>
        <h4><span>推荐房源</span></h4>
        <ul class="RecommendHouse-ul">
            <li v-for="(item, index) in RecommendHouseItem" :key="index">
                <a-card :title="null" hoverable :loading="RecommendHouseCardLoading">
                    <router-link :to="{path: '/EstateDetails', query: {EstateHouseId: item.id}}" :title="item.title" :alt="item.title">
                        <img v-lazy="item.photo" :title="item.title" :alt="item.title">
                        <p class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</p>
                    </router-link>
                    <div class="bottom transition">
                        <p class="webkit-text-overflow-1lines">
                            <span>{{ isNull0(item.cityName) }}</span>
                            <span>${{isNull0(item.price)}}万</span> |
                            <span>{{isNull0(item.projectType)}}</span> |
                            <span>{{isNull0(item.investmentType)}}</span>
                        </p>
                    </div>
                </a-card>
            </li>
        </ul>
        <h4><span>热门资讯</span></h4>
        <ul class="HotNews-ul">
            <li v-for="(item, index) in HotNewsItem" :key="index">
                <a-card :title="null" hoverable :loading="HotNewsCardLoading" :bordered="false">
                    <router-link :to="{name: 'NewsDetails', params: {newsId: item.id}}">
                        <img v-lazy="item.photo" :title="item.title" :alt="item.title">
                    </router-link>
                    <aside>
                        <router-link :to="{name: 'NewsDetails', params: {newsId: item.id}}" class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</router-link>
                        <p class="webkit-text-overflow-2lines">{{ isNull0(item.description) }}</p>
                    </aside>
                </a-card>
            </li>
        </ul>
        <h4><span>1秒变身海外业主</span></h4>
        <!--客户留言——留言类型，type：1.购房意向、2.移民、3.留学、4.保险、5.1秒变身海外业主-->
        <clientMessage :messageType="msgType"></clientMessage>
    </article>
</template>

<script>
    import clientMessage from './clientMessage.vue';//公共组件——客户咨询留言

    export default {
        props: ["msgType"],//留言类型，type：1.购房意向、2.移民、3.留学、4.保险、5.1秒变身海外业主
        data() {
            return {
                AdvertisingNewsSwiper: null, //广告新闻资讯轮播的swiper配置
                AdvertisingNewsItem: [],    //广告新闻资讯轮播数据

                RecommendHouseCardLoading: true,  //推荐房源数据——卡片加载完成前会有文本块样式
                RecommendHouseItem: [],    //推荐房源数据
                HotNewsCardLoading: true,  //热门资讯数据——卡片加载完成前会有文本块样式
                HotNewsItem: [],    //热门资讯数据

            }
        },
        computed: {
        },
        created() {
        },
        mounted() {
            // 获取广告新闻资讯轮播数据
            this.getAdvertisingNewsData();
            // 获取推荐房源数据
            this.getRecommendHouseData();
            // 获取热门资讯数据
            this.getHotNewsData();

        },
        methods: {
            // 获取广告轮播数据
            getAdvertisingNewsData() {
                this.$get('/a/9').then(res => {
                    if (res.status == 0) {
                        this.AdvertisingNewsItem = res.data.list;

                        this.$nextTick(() => {
                            this.consultantTeamSwiper = new Swiper('#AdvertisingNews-swiper-container', {
                                loop : true,
                                autoplay: {
                                    delay: 5000,//自动切换的时间间隔，单位ms
                                    stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换
                                    disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true,如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
                                },
                                effect : 'fade',//slide的切换效果：淡入淡出
                                spaceBetween: 0,//slide之间的距离（单位px）
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable :true,
                                },
                                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                            });
                        })
                    }else{
                        console.log(res.msg);
                    }
                });
            },
            // 获取推荐房源数据
            getRecommendHouseData() {
                this.$get('/house/search/1/4?field=sort&direction=asc&isRecommend=true').then(res => {
                    this.RecommendHouseCardLoading = false;
                    if (res.status == 0) {
                        this.RecommendHouseItem = res.list;
                    }else{
                        console.log(res.msg);
                    }
                });
            },
            // 获取热门资讯数据
            getHotNewsData() {
                this.$get('/news/list/6/1/5').then(res => {
                    this.HotNewsCardLoading = false;
                    if (res.status == 0) {
                        this.HotNewsItem = res.list;
                    }else{
                        console.log(res.msg);
                    }
                });
            },

        },
        components: {
            clientMessage
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .components-rightList-box {
            background: #fff;
            padding: 15px;
            /* 广告新闻资讯轮播 */
            #AdvertisingNews-swiper-container{
                >.swiper-wrapper{
                    >.swiper-slide{
                        >a{
                            display: block;
                            position: relative;
                            overflow: hidden;
                            >img{
                                width: 100%;
                                height: 200px;
                                -webkit-transition: all linear 1s;
                                -moz-transition: all linear 1s;
                                transition: all linear 1s;
                            }
                            >p{
                                width: 100%;
                                position: absolute;
                                bottom: 0;
                                background: rgba(0,0,0,.4);
                                color: #fff;
                                padding: 0 0 0 15px;
                            }
                        }
                    }
                }
                .swiper-pagination{
                    text-align: right;
                    bottom: 0;
                    right: 20px;
                    left: auto;
                    >span {
                        background: #fff;
                        opacity: 1;
                    }
                    >.swiper-pagination-bullet-active{
                        background: #00b8ee;
                    }
                }
            }
            h4 {
                margin: 40px 0 20px 0;
                font-size: 18px;
                font-weight: bold;
                padding: 0 0 10px 0;
                border-bottom: 1px solid #E5E5E5;
                >span{
                    padding: 0 0 0 10px;
                    border-left: 4px solid #00A4A0;
                }
            }
            /* 推荐房源 */
            .RecommendHouse-ul{
                margin: 10px 0 0 0;
                >li{
                    padding: 10px 0;
                    .ant-card {
                        > .ant-card-body {
                            padding: 0;
                            -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                            -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                            -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                            -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                            > a {
                                display: block;
                                width: 100%;
                                height: 100%;
                                position: relative;
                                overflow: hidden;
                                > img {
                                    width: 100%;
                                    max-height: 260px;
                                    -webkit-transition: all linear 1s;
                                    -moz-transition: all linear 1s;
                                    transition: all linear 1s;
                                }
                                > p {
                                    width: 100%;
                                    position: absolute;
                                    bottom: 0;
                                    background: rgba(0, 0, 0, .4);
                                    font-size: 15px;
                                    color: #fff;
                                    padding: 0 0 0 12px;
                                }
                            }
                            > a:hover {
                                > img {
                                    -webkit-transform: scale(1.1, 1.1);
                                    -moz-transform: scale(1.1, 1.1);
                                    transform: scale(1.1, 1.1);
                                    filter: alpha(opacity=50);
                                }
                            }
                            > .bottom {
                                padding: 8px;
                                background: #fff;
                                > p {
                                    font-size: 14px;
                                    > span {
                                        /*margin: 0 8px;*/
                                    }
                                    > span:first-of-type {
                                        margin: 0 8px 0 0;
                                        font-size: 16px;
                                        color: #f65248;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            /*热门资讯*/
            .HotNews-ul{
                margin: 10px 0 0 0;
                > li {
                    padding: 10px 0;
                    .ant-card {
                        > .ant-card-body {
                            padding: 0;
                            overflow: hidden;
                            > a {
                                > img {
                                    width: 120px;
                                    height: 90px;
                                    float: left;
                                    margin-top: 5px;
                                    cursor: pointer;
                                }
                            }
                            > aside {
                                float: right;
                                width: calc(~"100% - 120px");
                                padding: 0 0 0 15px;
                                > a {
                                    font-size: 15px;
                                    color: #38485a;
                                    font-weight: bold;
                                    margin: 10px 0 0 0;
                                    cursor: pointer;
                                    -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                }
                                > a:hover {
                                    color: #00b8ee;
                                }
                                > p {
                                    width: 100%;
                                    color: #878787;
                                    margin: 5px 0 0 0;
                                    text-indent: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
